<template>
  <view class="ticket-sku-detail">
    <scroll-view class="content-container" scrollY>
      <template v-for="(group, groupIndex) in detailConfig">
        <view v-if="!group.hide" :key="groupIndex" class="content-group">
          <view class="content-group-title">{{group.title}}</view>

          <template v-for="(item, itemIndex) in group.children">
            <view class="sku-content-row" :key="itemIndex">
              <text class="sku-content-label">{{item.label}}：</text>

              <rich-text class="sku-content" space :nodes="renderData[item.key]"></rich-text>
            </view>
          </template>
        </view>
      </template>
    </scroll-view>

    <view v-if="detail.price" class="btn-wrapper">
      <basic-button size="full" borderRadius="0" height="100rpx" @click="$emit('click:booking')">立即预订</basic-button>
    </view>
    <basic-safe-area />
  </view>
</template>
<script>

export default {
  name: 'ticket-sku-detail',

  props: {
    detail: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      renderData: {
        availableBefore: '', // 预订时间
        validateDate: '', // 有效期
        costInclude: '', // 费用包含
        costNotInclude: '', //费用不含
        useMethod: '', // 使用方法
        refundPolicy: '', // 退款规则
        bookDeclarePortal: '' // 预订说明
      }, 
      detailConfig: [
        {
          title: '预订须知',
          children: [
            { label: '预订时间', key: 'availableBefore' },
            { label: '有效期', key: 'validateDate' }
          ],
          hide: false
        },
        {
          title: '费用说明',
          children: [
            { label: '费用包含', key: 'costInclude' },
            { label: '费用不含', key: 'costNotInclude' }
          ],
          hide: false
        },
        {
          title: '使用说明',
          children: [
            { label: '使用方法', key: 'useMethod' }
          ],
          hide: false
        },
        {
          title: '退款说明',
          children: [
            { label: '退款规则', key: 'refundPolicy' }
          ],
          hide: false
        },
        {
          title: '预订说明',
          children: [
            { label: '预订说明', key: 'bookDeclarePortal' }
          ],
          hide: false
        }
      ]
    }
  },

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.renderData.availableBefore =  this.detail.availableBefore
      this.renderData.validateDate =  `${this.detail.availablePeriod} ${this.detail.labelAvailableAfterConfirm || ''}`
      this.renderData.costInclude =  this.detail.costInclude && this.detail.costInclude.replace(/<\/br>/g, '<br/>')
      this.renderData.costNotInclude =  this.detail.costNotInclude && this.detail.costNotInclude.replace(/<\/br>/g, '<br/>')

      if (this.detail.useMethod) {
        this.renderData.useMethod = this.detail.useMethod.replace(/<\/br>/g, '<br/>')
      } else {
        this.detailConfig[2].hide = true
      }
      
      if (this.detail.cancellationRulesStr && this.detail.cancellationRulesStr.length) {
        let cancelRules =  this.detail.cancellationRulesStr.map((str, index) => {
          if (index <= 0) return str
          else return `
          ${str}`
        }).join('')

        if (this.detail.refundPolicy) {
          this.renderData.refundPolicy = cancelRules + `
          ${this.detail.refundPolicy}`
        } else {
          this.renderData.refundPolicy = cancelRules
        }
      }

      if (this.detail.bookDeclarePortal) {
        this.renderData.bookDeclarePortal =  this.detail.bookDeclarePortal
      } else {
        this.detailConfig[4].hide = true
      }
    }
  }
}
</script>
<style lang="less">
.ticket-sku-detail {
  .content-container {
    height: 1000rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  
  .content-group {
    padding: 30rpx 0;
    color: @font_small_color;

    &:not(:last-of-type) {
      border-bottom: 1rpx solid @border_color;
    }

    .content-group-title {
      font-size: 30rpx;
      font-weight: 600;

      margin-bottom: 30rpx;
    }

    .sku-content-row {
      .flex;

      .sku-content-label {
        position: relative;
        width: 160rpx;
        padding-left: 20rpx;

        &::before{
          content: ' ';
          position: absolute;
          width: 8rpx;
          height:8rpx;
          display: block;
          top: 16rpx;
          left: 4rpx;
          background-color: #666;
          border-radius: 6rpx;
        }
      }

      .sku-content {
        .flex-1;

        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }

  .btn-wrapper {
  }
}
</style>